<%@page import="kokonut.shop.product.Image"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page import="java.util.List" %>
<%@ page import="kokonut.shop.product.TShirtModel" %>
<%@ page import="persistence.PMF" %>
<%@ page import="javax.jdo.PersistenceManager" %>
<jsp:useBean id="ProductPersistence" class="persistence.ProductPersistence" scope="request" />

<%@page import="javax.jdo.PersistenceManager"%>
<%@page import="persistence.ProductPersistence"%><html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="/administration/adminStyle.css" rel="stylesheet" type="text/css"/>
        <link href="../style/administration/productEditorStyle.css" rel="stylesheet" type="text/css"/>
        <title>Kokonut Web :: Admin</title>
        <SCRIPT type="text/javascript" src="/administration/loadImage.js"></SCRIPT>
    </head>
    <body>
        <%
                    BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();

                    TShirtModel shirt;
                    String action = request.getParameter("action");
                    if (action != null && action.equals("editProduct")) {
                        shirt = (TShirtModel) ProductPersistence.loadModelByRef(Integer.parseInt(request.getParameter("ref")));
                    } else {
                        shirt = new TShirtModel();
                    }
        %>
        <div class="wrapper">
            <h1>Kokonut Web</h1>
            <div id="content">
                <fieldset id="formFieldset" style="float: left"><legend>Product editor</legend>
                    <form action="<%= blobstoreService.createUploadUrl("/" + action)%>" method="post" enctype="multipart/form-data" name="form">
                        <div id="initialFields"><p>Product Type:
                                <select name="type">
                                    <option value="0">(please select:)</option>
                                    <option value="T-Shirt" selected>T-Shirt</option>
                                </select>
                            </p>
                            <p>Ref:<input type="text" name="ref" <%if (action.equals("editProduct")) {%>readonly="readonly"<%}%> value="<%=shirt.getRef()%>" onblur="confirmRef(this.value)"/></p>
                            <p>Name:<input type="text" name="name" value="<%=shirt.getName()%>"/></p></div>
                        <div><fieldset>
                                <legend>Available Sizes</legend>
                                <div id="sizes"><p>S  <input type="checkbox" name="sizes" value="S" <%if (shirt.hasS()) {%>checked="checked"<%}%>></p>
                                    <p>M  <input type="checkbox" name="sizes" value="M" <%if (shirt.hasM()) {%>checked="checked"<%}%>/></p>
                                    <p>L  <input type="checkbox" name="sizes" value="L" <%if (shirt.hasL()) {%>checked="checked"<%}%>/></p>
                                    <p>XL <input type="checkbox" name="sizes" value="XL" <%if (shirt.hasXL()) {%>checked="checked"<%}%>/></p>
                                    <p>XXL <input type="checkbox" name="sizes" value="XXL"<%if (shirt.hasXXL()) {%>checked="checked"<%}%>/></p></div>
                                <div id="prices">
                                    <p>S Price<input type="text" name="priceS" size="4" value="<%=shirt.getPriceBySize("S")%>"></p>
                                    <p>M Price<input type="text" name="priceM" size="4" value="<%=shirt.getPriceBySize("M")%>"></p>
                                    <p>L Price<input type="text" name="priceL" size="4" value="<%=shirt.getPriceBySize("L")%>"></p>
                                    <p>XL Price<input type="text" name="priceXL" size="4" value="<%=shirt.getPriceBySize("XL")%>"></p>
                                    <p>XXL Price<input type="text" name="priceXXL" size="4" value="<%=shirt.getPriceBySize("XXL")%>"></p></div></fieldset></div>
                        <div><fieldset id="colorsFieldset">
                                <legend>Available Colors</legend>
                                <div id="colors">
                                    WHITE  <input type="checkbox" id="colorsWHITE" name="colors" value="WHITE" <%if (shirt.hasWhite()) {%>checked="checked"<%}%> onchange="showImageSelector(this.value)"><br/>
                                    YELLOW  <input type="checkbox" id="colorsYELLOW" name="colors" value="YELLOW" <%if (shirt.hasYellow()) {%>checked="checked"<%}%> onchange="showImageSelector(this.value)"><br/>
                                    ORANGE  <input type="checkbox" id="colorsORANGE" name="colors" value="ORANGE" <%if (shirt.hasOrange()) {%>checked="checked"<%}%> onchange="showImageSelector(this.value)"><br/>
                                    RED <input type="checkbox" id="colorsRED" name="colors" value="RED" <%if (shirt.hasRed()) {%>checked="checked"<%}%> onchange="showImageSelector(this.value)"><br/>
                                    BROWN <input type="checkbox" id="colorsBROWN" name="colors" value="BROWN"<%if (shirt.hasBrown()) {%>checked="checked"<%}%> onchange="showImageSelector(this.value)"><br/>
                                    BLUE  <input type="checkbox" id="colorsBLUE" name="colors" value="BLUE" <%if (shirt.hasBlue()) {%>checked="checked"<%}%> onchange="showImageSelector(this.value)"><br/>
                                    GREEN  <input type="checkbox" id="colorsGREEN" name="colors" value="GREEN" <%if (shirt.hasGreen()) {%>checked="checked"<%}%> onchange="showImageSelector(this.value)"><br/>
                                    PURPLE  <input type="checkbox" id="colorsPURPLE" name="colors" value="PURPLE" <%if (shirt.hasPurple()) {%>checked="checked"<%}%> onchange="showImageSelector(this.value)"><br/>
                                    PINK <input type="checkbox" id="colorsPINK" name="colors" value="PINK" <%if (shirt.hasPink()) {%>checked="checked"<%}%> onchange="showImageSelector(this.value)"><br/>
                                    BLACK <input type="checkbox" id="colorsBLACK" name="colors" value="BLACK"<%if (shirt.hasBlack()) {%>checked="checked"<%}%> onchange="showImageSelector(this.value)"></div></fieldset></div>
                        <div id="selectors"><p id="WHITESelector" class="hidden">Image for White:<input type="file" name="WHITEImage" /></p>
                            <p id="YELLOWSelector" <%if (!shirt.hasThisColorImage("YELLOW")) {%>class="hidden"<%}%>>Image for Yellow:<input type="file" name="YELLOWImage" /></p>
                            <p id="ORANGESelector" <%if (!shirt.hasThisColorImage("ORANGE")) {%>class="hidden"<%}%>>Image for Orange:<input type="file" name="ORANGEImage" /></p>
                            <p id="REDSelector" <%if (!shirt.hasThisColorImage("RED")) {%>class="hidden"<%}%>>Image for Red: <input type="file" name="REDImage" /></p>
                            <p id="BROWNSelector" <%if (!shirt.hasThisColorImage("BROWN")) {%>class="hidden"<%}%>>Image for Brown: <input type="file" name="BROWNImage" /></p>
                            <p id="BLUESelector" <%if (!shirt.hasThisColorImage("BLUE")) {%>class="hidden"<%}%>>Image for Blue: <input type="file" name="BLUEImage" /></p>
                            <p id="GREENSelector" <%if (!shirt.hasThisColorImage("GREEN")) {%>class="hidden"<%}%>>Image for Green: <input type="file" name="GREENImage" /></p>
                            <p id="PURPLESelector" <%if (!shirt.hasThisColorImage("PURPLE")) {%>class="hidden"<%}%>>Image for Purple: <input type="file" name="PURPLEImage"  /></p>
                            <p id="PINKSelector" <%if (!shirt.hasThisColorImage("PINK")) {%>class="hidden"<%}%>>Image for Pink: <input type="file" name="PINKImage" /></p>
                            <p id="BLACKSelector" <%if (!shirt.hasThisColorImage("BLACK")) {%>class="hidden"<%}%>>Image for Black: <input type="file" name="BLACKImage" onchange="showImage(this)"/></p></div>
                        <input type="button" value="Accept" onclick="validarProducto()">
                    </form>
                    <br/>
                    <a href="/admin/shopAdmin">back</a>
                </fieldset>
                <div id="imagenes" style="float: right">
                    <%
                                for (Image img : shirt.getModelImages()) {
                    %>
                    <img id="productImage" alt="image" src="<%="/serve?blob-key=" + img.getImageKey()%>" height="150px" width="180px"/>
                    <%
                                }
                    %>
                </div>
            </div>
        </div>
    </body>
</html>